﻿<style src="../../style/statistics.css" scoped></style>
<template>
    <div style="height:100%;">
        <Row>
            <Col span="24" class="col-margin">
            <!--根据需求删除不不要查询条件-->
            所属地区：
            <Select v-model="searchModel.AreaCode"  placeholder="请选择..." style="width: 100px" >
                <Option :value="userInfo.AreaCode">{{(userInfo.AreaCode=='530000000000')?'全省':'全市（州）'}}</Option>
                <Option :value="item.value" v-for="item in AreaList" :key="item.value">{{item.label}}</Option>
            </Select>
             填报年度：
            <Select v-model="searchModel.FillInYear" placeholder="全部" style="width: 200px" >
                <!-- <Option value="">全部</Option> -->
                <Option :value="item.DictValue" v-for="item in yearList" :key="item.DictValue">{{item.DictText}}</Option>
            </Select>
            报表状态：
            <Select v-model="searchModel.Status" placeholder="全部" style="width: 200px" >
                <Option value="">全部</Option>
                <Option :value="item.DictValue" v-for="item in statusList" :key="item.DictValue">{{item.DictText}}</Option>
            </Select>
            <Button icon="ios-search" type="ghost" @click="getPageData()">查询</Button>
            </Col>
        </Row>        
        <Row>
            <Col span="24" class="col-margin">
            <Table size="small"  :height="clientHeight" border  :columns="columnsList" :data="datas.rows" no-data-text='暂无数据...'></Table>
            </Col>
        </Row>
        <Row>
            <Col span="24">
            <Page class="page-style" :total="datas.total" placement="top" @on-change="getPageNumber" :page-size="searchModel.PageSize" :page-size-opts='pageSizeOpts' show-sizer @on-page-size-change="getPageSize" show-total show-elevator></Page>
            </Col>
        </Row>
        <!-- <Modal v-model="showType" :mask-closable="false" width="1800">
            <p slot="header" class="title">
                <Icon type="ios-paper" size="20"></Icon>
                <span style="font-size: 20px">{{AreaName}}-（四）马铃薯项目实施情况统计表</span>
            </p>
            <p slot="close">
                <Icon type="close-circled" color="red" size=25></Icon>
            </p>            
            <table class="reptable">
                <thead>
                        <tr>
                            <th rowspan="3">项目名称</th>
                            <th rowspan="3">项目来源</th>
                            <th rowspan="3">实施年限（*年*月*日-*年*月*日）</th>
                            <th rowspan="2" colspan="2">项目资金（万元）</th>
                            <th rowspan="2" colspan="3">计划面积产量指标</th>                            
                            <th colspan="14">项目完成情况</th>
                            <th rowspan="2" colspan="5">推广情况</th>                            
                            <th rowspan="3">未完成情况说明</th>
                        </tr>
                        <tr>
                            <th colspan="4">总体完成情况</th>
                            <th colspan="7">测产验收情况</th>
                            <th colspan="3">项目增效情况</th>                            
                        </tr>
                        <tr>
                            <th>项目安排</th>
                            <th>配套</th>
                            <th>面积（亩）</th>
                            <th>产量（吨）</th>
                            <th>其他</th>
                            <th>实施地点</th>
                            <th>品种</th>
                            <th>面积（亩）</th>
                            <th>总产（吨）</th>
                            <th>测产面积（亩）</th>
                            <th>测产样本数（点数）</th>
                            <th>测产品种</th>
                            <th>测产平均亩产（公斤/亩）</th>
                            <th>最高亩产（吨）</th>
                            <th>对照品种</th>
                            <th>对照平均亩产（公斤/亩）</th>
                            <th>平均价格（元）</th>
                            <th>平均亩增加投入（元）</th>
                            <th>平均亩增加收益（元）</th>
                            <th>涉及乡镇数（个）</th>
                            <th>涉及村数（个）</th>
                            <th>涉及农户数（户）</th>
                            <th>涉及农业人数（人）</th>
                            <th>带动面积（亩）</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(dataModel,index) in dataList" :key="index">
                            <td>                                
                                {{dataModel.ProjectName}}                                
                            </td>
                            <td>                               
                                {{dataModel.ProjectSource}}
                            </td>
                            <td>                                
                                {{dataModel.Age}}                             
                            </td>
                            <td>                        
                                {{dataModel.ProjectArrange}}                                
                            </td> 
                            <td>                                
                                {{dataModel.ProjectSupport}}                                
                            </td>
                            <td>                                
                                {{dataModel.PlanArea}}                               
                            </td> 
                            <td>                                
                                {{dataModel.PlanYield}}                                   
                            </td>
                            <td>                                
                                {{dataModel.PlanOther}}                               
                            </td>
                            <td>
                                {{dataModel.ImplePlace}}                                
                            </td> 
                            <td>
                                {{dataModel.FVariety}}
                            </td>
                            <td>
                                {{dataModel.FArea}}
                            </td>
                            <td>
                                {{dataModel.FYield}}
                            </td> 
                            <td>
                                {{dataModel.CCArea}}                             
                            </td>
                            <td>
                                {{dataModel.CCSamples}}
                            </td>
                            <td>
                                {{dataModel.CCVariety}}
                            </td>
                            <td>
                                {{dataModel.CCavgMuYield}}
                            </td>
                            <td>
                                {{dataModel.CCbestMuYield}}  
                            </td>
                            <td>
                                {{dataModel.CCdzVariety}}
                            </td>  
                            <td>
                                {{dataModel.CCdzAvgMuYield}} 
                            </td>
                            <td>
                                {{dataModel.AvgPrice}}
                            </td>
                            <td>
                                {{dataModel.AvgMuInvest}}
                            </td>
                            <td>
                                {{dataModel.AvgMuIncome}} 
                            </td>
                            <td>
                                {{dataModel.Townships}}
                            </td>
                            <td>
                                {{dataModel.Villages}}  
                            </td>
                            <td>
                                {{dataModel.Farrmers}}  
                            </td>
                            <td>
                                {{dataModel.Peoples}}
                            </td>
                            <td>
                                {{dataModel.DDArea}}
                            </td>
                            <td>
                                {{dataModel.UnFinishDescribe}}
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div slot="footer" style="padding-bottom:50px">
                <Alert style="margin-top:5px;text-align:left" banner type="error">
                    填报时间：每年1月10日</br>
                    填报说明: 1.全省范围内从乡（镇）起，逐级全面统计，由县级填报经州（市）审核后上报。
                    <span slot="desc">
                    </span>
                </Alert>
            </div>
        </Modal> -->
        <Modal v-model="showAudit" :mask-closable="false" width="500">
            <p slot="header" class="title">
                <Icon type="ios-paper" size="20"></Icon>
                <span style="font-size: 20px">退回重报原因</span>
            </p>
            <p slot="close">
                <Icon type="close-circled" color="red" size=25></Icon>
            </p>
            <Input type="textarea" :rows="4" v-model="unPassReason" placeholder="请输入不通过原因..."></Input>
            <div slot="footer">
                <Button type="primary" @click="unpass()">确定</Button>
                <Button type="ghost" @click="showAudit=false" style="margin-left: 8px">取消</Button>
            </div>
        </Modal>
        <Modal v-model="showType" :mask-closable="false" width="1200" >
            <p slot="header" class="title">
                <Icon type="ios-paper" size="20"></Icon>
                <span style="font-size: 20px">{{AreaName}}-（四）马铃薯项目实施情况统计表</span>
            </p>
            <p slot="close">
                <Icon type="close-circled" color="red" size=25></Icon>
            </p>            
            <table class="statisTable" >
                <thead>
                    <tr>
                        <th rowspan="3" style="width:180px">项目名称</th>
                        <th rowspan="3">所属地区</th>
                        <th rowspan="3">项目来源</th>
                        <th rowspan="3">实施年限（*年*月*日-*年*月*日）</th>
                        <th rowspan="2" colspan="2">项目资金（万元）</th>
                        <th rowspan="2" colspan="3">计划面积产量指标</th>  
                        <th rowspan="3" >操作</th>
                    </tr>
                    <tr>                        
                    </tr>
                    <tr>
                        <th>项目安排</th>
                        <th>配套</th>
                        <th>面积（亩）</th>
                        <th>产量（吨）</th>
                        <th>其他</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(dataModel,index) in dataList" :key="index" >
                        <td style="text-align:center;width:180px" >                                
                            {{dataModel.ProjectName}}                                
                        </td>
                        <td style="text-align:center">
                            {{dataModel.AreaName}}
                        </td>
                        <td style="text-align:center">                               
                            {{dataModel.ProjectSource}}
                        </td>
                        <td style="text-align:center">                                
                            {{dataModel.Age}}                             
                        </td>
                        <td>                        
                            {{dataModel.ProjectArrange}}                                
                        </td> 
                        <td>                                
                            {{dataModel.ProjectSupport}}                                
                        </td>
                        <td>                                
                            {{dataModel.PlanArea}}                               
                        </td> 
                        <td>                                
                            {{dataModel.PlanYield}}                                   
                        </td>
                        <td style="text-align:center">                                
                            {{dataModel.PlanOther}}                               
                        </td>
                        <td style="text-align: center;">                                
                            <i-button size="small" icon="ios-list-outline"  style="color:#FF0000" @click="showDetail=true,detailModel=dataModel">
                                <span style="color:#000;">详情</span>
                            </i-button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div slot="footer" style="padding-bottom:50px">
                <div style="text-align:right;padding-top:5px" v-show="showEdit">
                    <Button type="primary" @click="pass()">审核通过</Button>
                    <Button type="warning" @click="showType=false,showAudit=true">退回重报</Button>
                </div>
                <Alert style="margin-top:5px;text-align:left" banner type="error">
                    填报时间：每年1月10日</br>
                    填报说明: 1.全省范围内从乡（镇）起，逐级全面统计，由县级填报经州（市）审核后上报。
                    <span slot="desc">
                    </span>
                </Alert>
            </div>
        </Modal>
        <Modal v-model="showDetail" :mask-closable="false" width="1300" :styles="{top:'10px'}">
            <p slot="header" class="title">
                <Icon type="ios-paper" size="20"></Icon>
                <span style="font-size: 20px">详细表</span>
            </p>
            <p slot="close">
                <Icon type="close-circled" color="red" size=25></Icon>
            </p>
            <table class="statisTable"  >
                <thead>
                    <tr>
                        <th rowspan="2" style="width:180px">项目名称</th>
                        <th rowspan="2">所属地区</th>
                        <th rowspan="2">项目来源</th>
                        <th rowspan="2">实施年限（*年*月*日-*年*月*日）</th>
                        <th  colspan="2">项目资金（万元）</th>
                        <th  colspan="3">计划面积产量指标</th> 
                    </tr>
                    <tr>
                        <th>项目安排</th>
                        <th>配套</th>
                        <th>面积（亩）</th>
                        <th>产量（吨）</th>
                        <th>其他</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="text-align:center;width:180px" >                                
                            {{detailModel.ProjectName}}                                
                        </td>
                        <td style="text-align:center">
                            {{detailModel.AreaName}}
                        </td>
                        <td style="text-align:center">                               
                            {{detailModel.ProjectSource}}
                        </td>
                        <td style="text-align:center">                                
                            {{detailModel.Age}}                             
                        </td>
                        <td>                        
                            {{detailModel.ProjectArrange}}                                
                        </td> 
                        <td>                                
                            {{detailModel.ProjectSupport}}                                
                        </td>
                        <td>                                
                            {{detailModel.PlanArea}}                               
                        </td> 
                        <td>                                
                            {{detailModel.PlanYield}}                                   
                        </td>
                        <td style="text-align:center">                                
                            {{detailModel.PlanOther}}                               
                        </td>
                    </tr>
                    <tr><th style="background-color:white;height:40px"></th></tr>
                    <tr>
                        <th colspan="14">项目完成情况</th>
                    </tr>
                    <tr>
                        <th colspan="4">总体完成情况</th>
                        <th colspan="7">测产验收情况</th>
                        <th colspan="3">项目增效情况</th>                            
                    </tr>
                    <tr>
                        <th>实施地点</th>
                        <th>品种</th>
                        <th>面积（亩）</th>
                        <th>总产（吨）</th>
                        <th>测产面积（亩）</th>
                        <th>测产样本数（点数）</th>
                        <th>测产品种</th>
                        <th>测产平均亩产（公斤/亩）</th>
                        <th>最高亩产（吨）</th>
                        <th>对照品种</th>
                        <th>对照平均亩产（公斤/亩）</th>
                        <th>平均价格（元）</th>
                        <th>平均亩增加投入（元）</th>
                        <th>平均亩增加收益（元）</th>
                    </tr>
                    <tr>
                        <td style="text-align:center">
                            {{detailModel.ImplePlace}}                                
                        </td> 
                        <td style="text-align:center">
                            {{detailModel.FVariety}}
                        </td>
                        <td>
                            {{detailModel.FArea}}
                        </td>
                        <td>
                            {{detailModel.FYield}}
                        </td> 
                        <td>
                            {{detailModel.CCArea}}                             
                        </td>
                        <td>
                            {{detailModel.CCSamples}}
                        </td>
                        <td>
                            {{detailModel.CCVariety}}
                        </td>
                        <td>
                            {{detailModel.CCavgMuYield}}
                        </td>
                        <td>
                            {{detailModel.CCbestMuYield}}  
                        </td>
                        <td>
                            {{detailModel.CCdzVariety}}
                        </td>  
                        <td>
                            {{detailModel.CCdzAvgMuYield}} 
                        </td>
                        <td>
                            {{detailModel.AvgPrice}}
                        </td>
                        <td>
                            {{detailModel.AvgMuInvest}}
                        </td>
                        <td>
                            {{detailModel.AvgMuIncome}} 
                        </td>
                    </tr>
                    <tr><th style="background-color:white;"></th></tr>
                    <tr>
                        <th colspan="5">推广情况</th>
                    </tr>
                    <tr>
                        <th>涉及乡镇数（个）</th>
                        <th>涉及村数（个）</th>
                        <th>涉及农户数（户）</th>
                        <th>涉及农业人数（人）</th>
                        <th>带动面积（亩）</th>
                    </tr>
                    <tr>
                        <td>
                            {{detailModel.Townships}}
                        </td>
                        <td>
                            {{detailModel.Villages}}  
                        </td>
                        <td>
                            {{detailModel.Farrmers}}  
                        </td>
                        <td>
                            {{detailModel.Peoples}}
                        </td>
                        <td>
                            {{detailModel.DDArea}}
                        </td>
                    </tr>
                    <tr><th style="background-color:white;"></th></tr>
                    <tr>
                        <th style="width:20%;height:100px">未完成情况说明</th>
                        <td style="text-align:center;height:100px">
                            {{detailModel.unFinishDescribe}}
                        </td>
                    </tr>
                </tbody>
            </table>
            <div slot="footer">
            </div>
        </Modal>
    </div>
</template>
<script>
export default {
    data() {
        return {
            showType: false,//是否显示查看页
            showEdit:false,//是否显示审核页
            showAudit:false,//是否显示审核不通过原因页
            showDetail:false,//显示详情
            detailModel:{},//详表对象
            yearList: this.GetGroupDict("ReportYear"), 
            statusList: this.GetGroupDict("ReportStatus"), 
            ReportId:'',  
            unPassReason:'' ,   
            dataList:[],    
            AreaName:'',
            dataModel: {//编辑模型
                Id: '',
                ReportId:'', 
                ProjectName:'', 
                ProjectSource:'', 
                Age:'', 
                ProjectArrange:'', 
                ProjectSupport:'', 
                PlanArea:'', 
                PlanYield:'', 
                PlanOther:'', 
                ImplePlace:'', 
                FVariety:'', 
                FArea:'', 
                FYield:'', 
                CCArea:'', 
                CCSamples:'', 
                CCVariety:'', 
                CCavgMuYield:'', 
                CCbestMuYield:'', 
                CCdzVariety:'', 
                CCdzAvgMuYield:'', 
                AvgPrice:'', 
                AvgMuInvest:'', 
                AvgMuIncome:'', 
                Townships:'', 
                Villages:'', 
                Farrmers:'', 
                Peoples:'', 
                DDArea:'', 
                unFinishDescribe:'', 
            },
            clientHeight: window.innerHeight - 218,//表格默认高度
            userInfo:this.GetlocaStorage("potUserinfo"),
            AreaList: [], //所属行政区划数组,
            //查询模型：根据需求删除不不要查询条件
            searchModel: {
                FillInYear:new Date().getFullYear()+'',
                AreaCode:this.GetlocaStorage("potUserinfo").AreaCode,
                ReportCode:'PotProject',
                Status:'3',
                PageNumber: 1, PageSize: 20
            },
            pageSizeOpts: [20, 40, 50],//默认分页最大设置
            datas: {},//table数据对象
            dataIds: [],
            ctx: this,//table数据上下文
            columnsList: [//表头对象
                {
                    title: '报表名称',
                    key: 'ReportCodeName',
                    ellipsis: true,
                    //width: 200
                },
                {
                    title: '归属地区',
                    key: 'AreaCodeName',
                    width: 120
                },
                {
                    title: '填报年度',
                    key: 'FillInYearName',
                    width: 120
                },
                // {
                //     title: '填报周期',
                //     key: 'TimesTypeName',
                //     width: 120
                // },
                // {
                //     title: '周期详情',
                //     key: 'TimesCycleName',
                //     width: 120
                // },
                {
                    title: "报表状态",
                    key: "StatusName",
                    width: 120,
                    render: (h, params) => {
                        switch (params.row.Status * 1) {
                            case 0: //审核未通过
                                return h('span', { class: { Error: true } }, params.row.StatusName);
                            case 1: //未填报
                                return h('span', { class: { NoReport: true } }, params.row.StatusName);
                            case 2: //已填报
                                return h('span', { class: { AlreadyReport: true } }, params.row.StatusName);
                            case 3: //已上报
                                return h('span', { class: { UpReport: true } }, params.row.StatusName);
                            case 4: //审核通过
                                return h('span', { class: { Success: true } }, params.row.StatusName);
                            case 5: //锁定
                                return h('span', { class: { error: true } }, params.row.StatusName);
                            default:
                                return h('span', { class: { Default: true } }, params.row.StatusName);
                        }
                    }
                },
                {
                    title: '添加时间',
                    key: 'StrUpdateTime',
                    ellipsis: true
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 350,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                class: { ieditColor: true },
                                props: {
                                    type: 'ghost', size: 'small', icon: 'ios-compose'
                                },
                                style: { marginRight: '5px', marginTop: '10px' },
                                on: {
                                    click: () => { 
                                        this.AreaName = params.row.AreaCodeName;
                                        this.ShowInfo(params.row.Id); }
                                }
                            }, '查看'),                           
                            h('Button', {
                                class: { ieditColor: true },
                                props: {
                                    type: 'ghost', size: 'small', icon: 'network'
                                },
                                attrs: {
                                    disabled: params.row.Status == 3 ? false : true
                                },
                                style: { marginRight: '5px', marginTop: '10px' },
                                on: {
                                    click: () => { 
                                        this.AreaName = params.row.AreaCodeName;
                                        this.EditInfo(params.row.Id);
                                    }
                                }
                            }, '审核'),
                            h('Button', {
                                class: { ideleteColor: true },
                                props: {
                                    type: 'ghost', size: 'small', icon: 'ios-undo'
                                },
                                style: {
                                    marginRight: '5px',marginTop: '10px'
                                },
                                on: {
                                    click: () => {
                                        this.unReview(params.row.Id)
                                    }
                                },
                                attrs: {
                                    disabled: params.row.Status == 4 ? false : true
                                },
                                // directives: [
                                //     {
                                //         name: 'omg-operation',
                                //         value: { op: "unreview" }
                                //     }
                                // ]
                            }, '取消审核'),

                        ]);
                    }
                }]
        }
    },
    mounted() {
        //table高度计算方法
        const that = this;
        window.onresize = () => {
            return (() => {
                that.clientHeight = window.innerHeight - 218;
            })()
        };
    },
    methods: {
        //获取当前页码
        getPageNumber(pageIndex) {
            this.searchModel.PageNumber = pageIndex;
            this.getPageData();
        },
        //获取当前分页大小
        getPageSize(pageSize) {
            this.searchModel.PageSize = pageSize;
            this.getPageData();
        },
        //获取this.datas: {},//table数据对象
        getPageData() {
            var self = this;
            self.$http.post('Report/PostPageList', this.searchModel).then(function (res) {
                if (res.data.status === 1) {
                    self.datas = res.data;
                }
                else {
                    self.$Modal.error({ title: '提示信息', content: res.data.message });
                }
            });
        },
        changeReportStatue(ReportId, Status, Msg) {
            var self = this;
            let model = new Object();
            model.Id = ReportId;
            model.Status = Status;
            model.Opinion = Msg;
            this.$http.post("Report/PostUpStatus", model).then(
                function (res) {
                    if (res.data.status == 1) {
                        self.$Notice.success({ title: '操作成功！', desc: false });
                        self.getPageData();
                    }
                    else {
                        self.$Modal.error({ title: "提示信息", content: "操作失败!" });
                    }
                }
            );
        },
        pass(){
            this.showType = false;
            this.changeReportStatue(this.ReportId,'4','');
        },
        unpass(){
            this.showAudit = false;
            this.changeReportStatue(this.ReportId,'0',this.unPassReason);
        },
        unReview(ReportId){
            this.changeReportStatue(ReportId,'0','审核有误！');
        },
        ShowInfo(ReportId){
            var self = this;
            this.$http.get("PotProject", { params: { ReportId: ReportId } }).then(//获取数据编辑项的值
                function (res) {
                    if (res.data.status == 1) {
                        self.dataList = res.data.model;
                        self.showType = true;     
                        self.showEdit = false;                     
                    }
                    else {
                        self.$Modal.error({ title: "提示信息", content: "数据加载失败!!!" });
                    }
                }
            );
        },
        EditInfo(ReportId){
            var self = this;
            this.$http.get("PotProject", { params: { ReportId: ReportId } }).then(//获取数据编辑项的值
                function (res) {
                    if (res.data.status == 1) {
                        self.dataList = res.data.model;
                        self.ReportId = ReportId;
                        self.showType = true; 
                        self.showEdit = true;                        
                    }
                    else {
                        self.$Modal.error({ title: "提示信息", content: "数据加载失败!!!" });
                    }
                }
            );
        },
        SearchAreaList() {
            var areaCode = this.userInfo.AreaCode;
            var areaList = [];
            if (areaCode != "530000000000" && areaCode != null) {
                var item = this.GetlocaStorage("areatreelist")[0];
                for (var i = 0; i < item.children.length; i++) {
                    if (item.children[i].value == areaCode) {
                        areaList.push(item.children[i]);
                    }
                }
            } else {
                areaList = this.GetlocaStorage("areatreelist");
            }
            this.AreaList = areaList[0].children;
        },
       
    },
    //创建Vue页面方法
    created: function () {
        //创业Vue前调用获取this.datas: {},//table数据对象
        this.getPageData();
        this.SearchAreaList();
    },
    watch: {
        //需要监听的在此处新增监听对象
    }
}
</script>
